<template>
  <div class="container">
    <el-card>
      <!-- 头部查询部分 -->
      <QustionsHeader @getList="getList()" :visible="showDialog" :list="tableData.list" @onSearch="onSearch">
      </QustionsHeader>
      <!-- 页面主要内容 -->
      <el-alert :title="'数据一共有' + page.total + '条'" type="info" show-icon :closable="false" />
      <el-table :data="tableData.list" style="width: 100%" fit border>
        <el-table-column prop="number" label="试题编号" />
        <el-table-column prop="subject" label="学科" />
        <el-table-column prop="catalog" label="目录" />
        <el-table-column prop="questionType" label="题型">
          <template v-slot="{row}">
            {{questionTypeFilter(row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template v-slot="{row}">
            {{delHtmlTag(row.question)}}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template v-slot="{row}">
            {{parseTimeByString(row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template v-slot="{row}">
            {{difficultyFilter(row.difficulty)}}
            <!-- {{row.difficulty}} -->
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" />
        <el-table-column label="操作" width="200px">
          <template v-slot="{row}">
            <el-button @click="onPreview(row)" circle>
              <el-icon>
                <View />
              </el-icon>
            </el-button>
            <el-button circle @click="onEdit(row)">
              <el-icon>
                <EditPen />
              </el-icon>
            </el-button>
            <el-button circle @click="onDel(row)">
              <el-icon>
                <Delete />
              </el-icon>
            </el-button>
            <el-button circle @click="onAddGood(row)">
              <el-icon>
                <Check />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <el-pagination layout="prev, pager, next, sizes, jumper" :current-page="page.page" :total="page.total"
          background :page-sizes="[5, 10, 20, 50]" :page-size="page.pagesize" @current-change="onCurrentChange"
          :hide-on-single-page="value" @size-change="handleSizeChange">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
  <QuestionsPreview v-if="showPreviewDialog"
    :showPreviewDialog="showPreviewDialog" @close="showPreviewDialog=false" :previewList="previewList">
  </QuestionsPreview>
</template>

<script>
import { choiceAdd, detail, list, remove } from '@/api/hmmm/questions'
import { parseTimeByString, delHtmlTag, questionTypeFilter, difficultyFilter } from '@/filters/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import QustionsHeader from '../components/questions-header.vue'
import QuestionsPreview from '../components/questions-preview.vue'
import { useRouter } from 'vue-router'
export default {
  name: 'QuestionsPage',
  components: { QustionsHeader, QuestionsPreview },
  setup (props, context) {
    const showDailog = ref('true') // 头部的显示
    const tableData = reactive({
      list: []
    })
    // ----头部搜索---
    async function onSearch (form) {
      const { data } = await list({ ...form })
      tableData.list = data.items
    }
    // 表格数据
    // ----分页-----
    const value = ref(false)
    const page = reactive({
      page: 1,
      total: 0,
      pagesize: 5
    })
    function onCurrentChange (val) {
      page.page = val
      getList()
    }
    async function handleSizeChange (val) {
      // 页面大小改变事件
      page.pagesize = val
      getList()
    }
    // -----删除一行的数据------
    function onDel (id) {
      // 代码片段epmecon
      ElMessageBox.confirm('此操作将永久删除该题目,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(id).then(() => {
          console.log(id)
          ElMessage.success('删除成功！')
          getList()
        })
      })
    }
    // -----根据编辑修改------
    const router = useRouter()
    function onEdit (data) {
      router.push({ path: 'new', query: data })
    }
    // -----加入精选-----
    function onAddGood (data) {
      ElMessageBox.confirm('此操作将该题目加入精选,是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choiceAdd({ id: data.id, choiceState: 1 }).then(() => {
          ElMessage.success('加入精选成功')
          getList()
        })
      }).catch(() => {

      })
    }
    // -----渲染列表------
    async function getList () {
      const { data } = await list({
        ...page
      }) // 调接口获取列表数据
      page.total = data.counts
      tableData.list = data.items
    }

    // ----- 预览按钮--------
    // 预览请求
    const showPreviewDialog = ref(false)
    async function onPreview (data) {
      getDtailList(data)
    }
    const previewList = ref({})
    async function getDtailList (id) {
      const { data } = await detail(id)
      console.log(data)
      previewList.value = data
      showPreviewDialog.value = true
    }
    onMounted(() => {
      getList()
    })
    // 返回数据
    return {
      showDailog, getList, page, tableData, onCurrentChange, handleSizeChange, onPreview, value, onDel, onAddGood, delHtmlTag, onEdit, showPreviewDialog, questionTypeFilter, onSearch, getDtailList, previewList, difficultyFilter, parseTimeByString
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  margin: 15px;
  padding: auto;
}
</style>
